<!--
 * @Author       : 邱狮杰
 * @Date         : 2021-09-02 10:23:57
 * @LastEditTime : 2021-09-09 12:53:07
 * @FilePath     : /newhope/src/page/luckDraw/components/shake.vue
 * @Description  : 摇一摇
-->

<script lang="ts" setup>
import { Reward } from "/@/components/index";
import Shake from 'shake.js'
import shake from "/@/assets/images/shake.png"; // 摇一摇
import { getPermission } from '/@/utils/deviceMotionHandler'
import { onMounted, onUnmounted } from 'vue'
import luckyDraw from "/@/assets/images/luckyDraw.png"; // 抽奖
const emit = defineEmits(["onShakeClick"]);
let shallowReactive = {
  stop: () => { },
  remove: () => { }
}
function next() {
  emit("onShakeClick");
}
// @ts-ignore
const s = new Shake({
  threshold: 10, // optional shake strength threshold
  timeout: 500 // optional, determines the frequency of event generation
})
onMounted(() => {
  // @ts-ignore
  getPermission(() => {
    s.start()
    window.addEventListener('shake', next as any, false);
  })
})
onUnmounted(() => {
  s.stop()
  window.removeEventListener('shake', next as any, false)
})
function onShakeClick() {
  emit("onShakeClick");
}
</script>
<template>
  <Reward style="z-index: 108">
    <template #img>
      <img class="img" :src="luckyDraw" />
    </template>
    <template #button>
      <img @click="onShakeClick" :src="shake" class="getInfoButton" />
    </template>
  </Reward>
</template>
<style lang="scss" scoped>
.img {
  position: fixed;
  bottom: 195px;
  left: 50%;
  transform: translateX(-50%);
  width: 317px;
  height: 395px;
  z-index: 101;
  -webkit-animation: wobble-hor-bottom 0.8s infinite;
  animation: wobble-hor-bottom 0.8s infinite;
}
.getInfoButton {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 127px;
  height: 42px;
  z-index: 101;
}
@-webkit-keyframes wobble-hor-bottom {
  0%,
  100% {
    transform: translateX(-50%);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  15% {
    -webkit-transform: translateX(-50%) rotate(-6deg);
    transform: translateX(-50%) rotate(-6deg);
  }
  30% {
    -webkit-transform: translateX(-50%) rotate(6deg);
    transform: translateX(-50%) rotate(6deg);
  }
  45% {
    -webkit-transform: translateX(-50%) rotate(-3.6deg);
    transform: translateX(-50%) rotate(-3.6deg);
  }
  60% {
    -webkit-transform: translateX(-50%) rotate(2.4deg);
    transform: translateX(-50%) rotate(2.4deg);
  }
  75% {
    -webkit-transform: translateX(-50%) rotate(-1.2deg);
    transform: translateX(-50%) rotate(-1.2deg);
  }
}
@keyframes wobble-hor-bottom {
  0%,
  100% {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    transform: translateX(-50%);
  }
  15% {
    -webkit-transform: translateX(-50%) rotate(-6deg);
    transform: translateX(-50%) rotate(-6deg);
  }
  30% {
    -webkit-transform: translateX(-50%) rotate(6deg);
    transform: translateX(-50%) rotate(6deg);
  }
  45% {
    -webkit-transform: translateX(-50%) rotate(-3.6deg);
    transform: translateX(-50%) rotate(-3.6deg);
  }
  60% {
    -webkit-transform: translateX(-50%) rotate(2.4deg);
    transform: translateX(-50%) rotate(2.4deg);
  }
  75% {
    -webkit-transform: translateX(-50%) rotate(-1.2deg);
    transform: translateX(-50%) rotate(-1.2deg);
  }
}
</style>
